<template>
  <div>
    <div>
      <div class="bread" style="position: fixed; z-index: 999; top: 0">
        <div class="wrap">
          <nuxt-link to="/">
            <span>产品中心</span>
          </nuxt-link>
        </div>
      </div>
      <div class="main" style="height: 80px">
        <div class="left left1" style="">
          <div class="title">全部商品分类</div>
        </div>
        <div class="right right1">
          <div class="cate" style="">
            <div v-if="list.length" class="title">
              {{ list[selectedIndex].name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main" style="margin-top: 0">
      <div class="left">
        <div class="list">
          <div
            class="item pointer"
            v-for="(item, index) in list"
            @click="selectedIndex = index"
            :class="index == selectedIndex ? 'active' : ''"
            :key="index"
          >
            <img src="" class="icon hide" />
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="right">
        <div class="cate">
          <div class="list" v-if="list.length">
            <nuxt-link
              class="item pointer"
              v-for="oitem in list[selectedIndex].chirdren"
              :key="oitem.id"
              :to="{
                name: 'list',
                query: {
                  pname: list[selectedIndex].name,
                  cname: oitem.name,
                  id: oitem.id
                }
              }"
            >
              <img
                src="https://img2.baidu.com/it/u=2987194409,1824327816&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                class="pic"
              />
              <div class="name">{{ oitem.name }}</div>
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, store, route }) {
    let cartList = []
    let cartNum = 0
    let list = []
    try {
      const listData = await $axios.get('productApi/getCartList')
      cartList = listData.data
      cartNum = cartList.length

      const { data: categoryData } = await $axios.get('productApi/categoryAll')
      list = categoryData.filter(item => item.chirdren.length > 0)
    } catch (err) {
      console.log(err)
    }
    return {
      cartList,
      cartNum,
      list
    }
  },
  components: {},
  data() {
    return {
      selectedIndex: 0,
      orderId: null
    }
  },
  mounted() {
    console.log(123)
  },
  methods: {}
}
</script>

<style lang="scss">
.main {
  width: 1200px;
  margin: 0 auto;
  margin-top: 42px;
  .left1 {
    height: 80px;
    line-height: 80px;
    background: #fff;
    width: 256px;
  }
  .left {
    width: 256px;
    float: left;

    .title {
      font-size: 18px;
      font-weight: 600;
      color: #222222;
    }

    .list {
      margin-top: 24px;

      .item {
        width: 256px;
        height: 56px;
        border: 1px solid #dddddd;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #222222;
        padding-left: 12px;

        .icon {
          width: 48px;
          height: 48px;
          background-color: gray;
          margin-left: 12px;
        }
      }

      .item.active {
        background: #ff590f;
        border: 1px solid #ff590f;
        color: #ffffff;
      }
    }
  }
  .right1 {
    height: 80px;
    line-height: 80px;
    background: #fff;
    width: 892px;
  }
  .right {
    width: 892px;
    float: right;
    .cate {
      margin-bottom: 32px;

      .title {
        font-size: 20px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #222222;
      }

      .list {
        margin-top: 24px;
        margin-right: -16px;

        .item {
          width: 211px;
          height: 251px;
          border: 1px solid #dddddd;
          margin-right: 16px;
          margin-bottom: 16px;
          display: inline-block;
          text-align: center;
          margin-top: 20px;

          .pic {
            width: 171px;
            height: 171px;
            margin-top: 20px;
            background-color: gray;
          }

          .name {
            font-size: 16px;
            font-weight: 600;
            color: #222222;
            line-height: 16px;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
